<template>
	<div class="select-city-box" @touchmove.prevent>
		<div class="select-city-header">
			<div class="back"  @click="selectCityBack"></div>
		    <p>选择地区</p>
		</div>
		<div class="city-list-box" ref="wrapper">
			<ul>
				<li v-for="v in cityArray">
					<p class="list-letter">{{v.letter}}</p>
					<p class="list-city-name" v-for="v  in  v.list">{{v}}</p>
				</li>
			</ul>
		</div>
		<ul class="city-letter">
			<li  :ref="v" v-for="(v,index) of  cityLetter"  @click="handeClick"  @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend= "handleTouchEnd" :key="index">{{v}}</li>
		</ul>
	</div>
</template>

<script>
	import BScroll from 'better-scroll'
	export default{
		data(){
			return{
				 touchstart:false,
		         startY:0,
		         timer: null,
				 cityArray: [
					{ 
						'letter':'A',
					    'list'  :['安徽省','澳门特别行政区']
					},
				    { 
						'letter':'B',
					    'list'  :['北京']
					},
					{ 
						'letter':'C',
					    'list'  :['重庆市']
					},
					{ 
						'letter':'F',
					    'list'  :['福建省']
					},
				    { 
						'letter':'G',
					    'list'  :['甘肃省','广东省','广西壮族自治区','贵州省']
					},
					{ 
						'letter':'H',
					    'list'  :['海南省','河北省','黑龙江省','河南省','湖北省','湖南省']
					},
					{ 
						'letter':'J',
					    'list'  :['江苏省','江西省','吉林省']
					},
				    { 
						'letter':'L',
					    'list'  :['辽宁省']
					},
					{ 
						'letter':'N',
					    'list'  :['内蒙古自治区','宁夏回族自治区']
					},
					{ 
						'letter':'Q',
					    'list'  :['青海省']
					},
					{ 
						'letter':'S',
					    'list'  :['山东省','上海市','陕西省','山西省','四川省']
					},
					{ 
						'letter':'T',
					    'list'  :['台湾省','天津市']
					},
					{ 
						'letter':'X',
					    'list'  :['香港特别行政区','新疆维吾尔自治区','西藏自治区']
					},
					{ 
						'letter':'Y',
					    'list'  :['云南省']
					},
				    { 
						'letter':'Z',
					    'list'  :['浙江省']
					}
				],
				cityLetter:['A','B','C','F','G','H','J','L','N','Q','S','T','X','Y','Z'],//没有D E I K  M O  P R  U V  W
				gdLetter:''

			}
		},
		components:{
		},
		created(){
			this.$store.dispatch("hideNav")
		},
		mounted(){
			 this.scroll = new BScroll(this.$refs.wrapper)
			this.startY = this.$refs['A'][0].offsetTop
            //console.log(this.$refs['A'][0].offsetTop)
		},
		updated () {
          // console.log(this.$refs['A'])
        },
//      computed: {
//      letter () {
//          const letter =[]
//          for (let i in this.list) { //循环A-Z
//              letter.push(i)
//          }
//          return letter
//      }
//   },
     watch:{
        gdLetter() { 
                const element = this.$refs.wrapper.getElementsByClassName('list-letter')[parseInt(this.gdLetter)]
                //console.log(this.$refs.wrapper.getElementsByClassName('list-letter')[parseInt(this.gdLetter)])
               this.scroll.scrollToElement(element,600,0,0,'ease-in')
        }
    },
		methods:{
		getArrayIndex(arr, obj) {
		    var i = arr.length;
		    while (i--) {
		        if (arr[i] === obj) {
		            return i;
		        }
		    }
		    return -1;
		},
			selectCityBack(){
				//console.log(111)
			},
			handeClick(e){
				console.log('click')
				//this.$emit('chang',e.target.innerText) //传给父组件City
				//console.log(e.target.innerText)
				//this.touchstart = true
				//this.gdLetter = this.getArrayIndex(this.cityLetter, e.target.innerText)
				//this.touchstart = true
				 //this.gdLetter = this.getArrayIndex(this.cityLetter, e.target.innerText)
			},
            handleTouchStart(e){
          	 console.log('start')
          	  // 手指放上
               this.touchstart = true
              
            },
            handleTouchMove(e){
            	  // 手指移动
            if(this.touchstart) {
                if(this.timer) {
                    clearInterval(this.timer)
                }
                this.timer = setTimeout(() => {
                	//console.log(e.touches[0].clientY)
                	//console.log(this.startY)
                    const touchY = e.touches[0].clientY -79   //到蓝色头部的距离
                    //console.log(touchY)
                    const index = Math.floor((touchY - this.startY ) / 30)
                    //console.log(index)
                    if(index >=0 && index < this.cityLetter.length) {
                        //this.$emit('chang',this.letter[index])
                        //console.log(this.cityLetter[index])
                        //this.gdLetter = this.cityLetter[index]
                         this.gdLetter = index
                          //console.log(index)
                    }
                },16)
            }
            },
            handleTouchEnd(e){
            	 console.log('end')
            	 // 手指离开
            	 this.gdLetter = this.getArrayIndex(this.cityLetter, e.target.innerText)
              this.touchstart = false
            }
		}
	}
</script>

<style scoped="scoped">
	.select-city-box{
		width:100vw;
		height: 100vh;
		background: white;
	}
	.select-city-header p{
		width: 100%;
	  	height: 80px;
	  	font-size: 36px;
	  	text-align: center;
	  	line-height: 80px;
	  	color: #333333;
	}
	  .back{
      	width: 65px;
		height: 55px;
		background: url(../../assets/images/iconsmall.png) no-repeat;
		background-size: 150px  150px;
		position: absolute;
		top: 20px;
		left: 40px;
      }
      .city-list-box{
        float: left;
        overflow: scroll;
        width: 100vw;
        height: calc(100vh - 80px);
      }
       .city-list-box ul,.city-list-box ul li{
        float: left;
      }
      .list-letter{
      	width: 100px;
      	display: inline-block;
      	color: #999999;
      	font-weight: 500;
      	font-size: 28px;
      	/*background: pink;*/
      	height: 80px;
      	float: left;
      	line-height: 75px;
      	padding-left: 25px;
      	
      }
      .list-city-name{
      	width: 650px;
      	height: 80px;
      	color: #333333;
      	/*font-weight: 500;*/
      	font-size: 32px;
      	display: inline-block;
      	float: right;
      	line-height: 80px;
      }
      .city-letter{
      	width: 50px;
      	position: absolute;
      	top: 180px;
      	right: 30px;
      	z-index: 10px;
      	color: #333333;
      	font-size: 24px;
      	/*background: #CCCCCC;*/
      	z-index: 100;
      	text-align: center;
      	display: flex;
      	justify-content: center;
      	align-items: center;
      	flex-direction: column;
      }
      .city-letter li{
      	width: 30px;
      	height: 30px;
      	text-align: center;
      	display: flex;
      	justify-content: center;
      	align-items: center;
      /*	background: pink;*/
      	border-radius: 50%;
      	margin: 15px 0;
      }
</style>